<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/7/27 0027
  Time: 14:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
  <base href="<%=basePath%>">
  <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="easyui-1.4/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui-1.4/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyui-1.4/demo/demo.css">
    <script type="text/javascript" src="easyui-1.4/jquery.min.js"></script>
    <script type="text/javascript" src="easyui-1.4/jquery.easyui.min.js"></script>

</head>
<body>
<div class="row">
    <div class="col-md-12">
        <!-- BEGIN PAGE TITLE & BREADCRUMB-->
        <h3 class="page-title" id="index-page-title" style="font: normal 30px/0.8em '微软雅黑'">孜点教科</h3>
        <ul class="page-breadcrumb breadcrumb">
            <%--<li>
                <i class="fa fa-home"></i>
                首页
                <i class="fa fa-angle-right"></i>
            </li>--%>
            <li>
                <%--<a href="javascript:;">--%>
                问卷管理
                <%--</a>--%>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <%--<a href="javascript:;">--%>
                设置问卷模板
                <%--</a>--%>
            </li>
        </ul>
        <!-- END PAGE TITLE & BREADCRUMB-->
    </div>
</div>
<div style="margin:20px 0;"></div>
<div style="width:800px;margin: 0 auto;background: #fff;">
    <div class="easyui-panel" title="设置问卷模板" style="width:800px;">
    <div style="margin: 10px 20px;">
       <form id="ff" class="easyui-form" data-options="novalidate:true" >
    <%--//登录后台人的id  发布人--%>
      <table cellpadding="5" id="xx">
        <tr>
          <td><input type="hidden" value="${user.teacherid}" name="publisherId" style="width:300px;height:30px; border:1px solid #d6dde5;background-color:transparent;padding:0px 10px;margin-bottom: 10px;"></td>
        </tr>
        <tr>
          <td>问卷标题:</td>
          <td><input class="easyui-validatebox textbox" type="text" name="questionnaireTitle" data-options='required:true' style="width:300px;height:30px; border:1px solid #d6dde5;background-color:transparent;padding:0px 10px;margin-bottom: 10px;"/></td>
        </tr>
        <tr>
          <td>问卷说明:</td>
          <td>
          <select id="explain" onChange="exp()"class="easyui-combobox" name="questionnaireExplain" data-options='required:true' style="width:300px;height:30px; border:1px solid #d6dde5;background-color:transparent;padding:0px 10px;margin-bottom: 10px;"">
              <option value="课程评价">课程评价</option>
              <option value="就业质量">就业质量</option>
              <%--<option value="就业意向">就业意向</option>--%>
              <%--<option value="就业追踪">就业追踪</option>--%>
              <%--<option value="培养质量评估">培养质量评估</option>--%>
              <%--<option value="专业评估">专业评估</option>--%>
              <%--<option value="专业认证">专业认证</option>--%>
              <option value="SCL-90">SCL-90</option>
          </select>
          </td>
        </tr>
        <tr>
          <td>选择群体:</td>
          <td>
            <select id="sel" onChange="chg()"class="easyui-combobox" name="publishObjects" data-options='required:true' style="width:300px;height:30px; border:1px solid #d6dde5;background-color:transparent;padding:0px 10px;margin-bottom: 10px;">
              <option value="课程">课程</option>
              <option value="班级">班级</option>
            </select>
          </td>
        </tr>
        <%--<tr>--%>
          <%--<td>具体对象:</td>--%>
          <%--<td><input class="easyui-textbox" type="text" name="releaseToWho" data-options="required:true"/></td>--%>
          <%--　　--%>
          <%--</tr>--%>
      </table>
</form>
       <div id="addtable" style="margin-top: 20px;"></div>
       <input type="button" value="添加选项" id="addOption1" onclick="addOption1()"/>
       <input type="button" value="添加属性" id="addOption2" onclick="addOption2()" style="margin-top: 10px;"/>
       <div></div>
       <div id="div">
          <div class="easyui-linkbutton" onclick="xuanze()" id="xuanze" style="padding:0px 5px">选择题</div>
          <div class="easyui-linkbutton" onclick="dafen()" id="dafen" style="padding:0px 5px">打分题</div>
       </div>
       <input type="button" value="添加问题" id="addQuestion" onclick="addQuestion()" style="margin-top: 10px;"/>
    </div>
<div style="text-align:center;padding:5px;margin:10px auto 20px;">
  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" id="submitForm" style="width:102px;height:30px;">确定</a>
  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" id="clearForm" style="width:102px;height:30px;">取消</a>
</div>
</div>


<script>

  var num=0;
  var tableid="";
  var fxid="";

  $(function(){

    $("#div").hide(); // 默认隐藏下拉框
    $("#addOption1").hide();
    $("#addOption2").hide();
    $("#addQuestion").click(function() {
        num++;
        $("#div").show();  // 已经显示则隐藏，隐藏了则显示toggle
//      $(this).val($(this).val()=="显示"?"隐藏":"显示");
        $("#addOption1").hide();
        $("#addOption2").hide();
    });

      var optionsNum=1;
    $("#xuanze").click(function() {
        optionsNum=1;
      tableid="table"+num;
        fxid="ff"+num;
//      alert(tableid)
        var formxx="<form id='"+fxid+"'>";
      var tablestart = "<table id='"+tableid+"'>";
      var tableend = "</table><br/>";
      var tbody ="<tr><td><input type='hidden' name='questionNumber' value="+num+"></td><td><input type='hidden' name='problemTypes' value='选择题'><td><input type='hidden' name='options' value="+optionsNum+"></td></tr>" +
              "<tr><td data-id='questionnaireName'>第"+num+"题：</td><td data-id='qn'><input class='easyui-textbox' type='text' name='questionContent' data-options='required:true'></td>" +
              "<td data-id='questionState'>问题头</td><td data-id='ci'><input class='easyui-textbox' type='text' name='questionState'></td></tr><br/>" +
              "<tr><td data-id='couplingIndex'>关联标签</td><td data-id='ci'><input class='easyui-textbox' type='text' name='couplingIndex'></td>" +
              "<td data-id='questionDescribe'>问题描述</td><td data-id='ci'><input class='easyui-textbox' type='text' name='questionDescribe'></td></tr><br/>" +
              "<tr><td data-id='optionsDescribe'>选项1</td><td data-id='op'><input class='easyui-textbox' type='text' name='optionsDescribe' data-options='required:true'></td>" +
              "<td data-id='score'>分数</td><td data-id='sc'><input class='easyui-textbox' type='text' name='score'></td></tr>";

        //<td data-id='couplingIndex'>关联标签</td><td data-id='ci'><input class='easyui-textbox' type='text' name='couplingIndex' data-options='required:true'></td>
        //<td data-id='score'>分数</td><td data-id='sc'><input class='easyui-textbox' type='text' name='score' data-options='required:true'></td>

        var formyy="</form><br/>";
        var targetObj =$("#addtable").append(formxx+tablestart + tbody + tableend+formyy);
        $.parser.parse(targetObj);

      $("#div").hide();

      $("#addOption1").show();
    })

    $("#dafen").click(function() {
        optionsNum=1;
      tableid="table"+num;
        fxid="ff"+num;
//      alert(tableid)
        var formxx="<form id='"+fxid+"'>";
      var tablestart = "<table id='"+tableid+"'>";
      var tableend = "</table><br/>";
//        var problemTypes="<tr><td><input type='hidden' name='problemTypes' value='打分题'></tr>";
      var tbody ="<tr><td><input type='hidden' name='questionNumber' value="+num+"></td><td><input type='hidden' name='problemTypes' value='打分题'></td><td><input type='hidden' name='options' value="+optionsNum+"></td></tr>" +
              "<tr><td data-id='questionnaireName'>第"+num+"题：</td><td data-id='qn'><input class='easyui-textbox' type='text' name='questionContent' data-options='required:true'></td>" +
              "<td data-id='questionState'>问题头</td><td data-id='ci'><input class='easyui-textbox' type='text' name='questionState'></td>" +
              "<td data-id='questionDescribe'>问题描述</td><td data-id='ci'><input class='easyui-textbox' type='text' name='questionDescribe'></td></tr>" +
              "<tr><td data-id='optionsDescribe'>属性1</td><td data-id='op'><input class='easyui-textbox' type='text' name='optionsDescribe' data-options='required:true'></td>" +
              "<td data-id='couplingIndex'>关联标签</td><td data-id='ci'><input class='easyui-textbox' type='text' name='couplingIndex'></td></tr>";
        //<td data-id='couplingIndex'>关联标签</td><td data-id='ci'><input class='easyui-textbox' type='text' name='couplingIndex' data-options='required:true'></td>
        var formyy="</form><br/>";

//      $("#addtable").append(formxx+tablestart + tbody + tableend+formyy);
        var targetObj =$("#addtable").append(formxx+tablestart + tbody + tableend+formyy);
        $.parser.parse(targetObj);

      $("#div").hide();

      $("#addOption2").show();
    })

  $(function(){

    $("#addOption1").click(function() {

        optionsNum++;
//      alert("进来了？？"+optionsNum)

      var addRow=$("#"+tableid).append("<tr><td data-id='optionsDescribe'>选项"+optionsNum+"</td><td data-id='op'><input class='easyui-textbox' type='text' name='optionsDescribe' data-options='required:true'></td><td data-id='score'>分数</td><td data-id='sc'><input class='easyui-textbox' type='text' name='score'></td><td><input type='hidden' name='options' value="+optionsNum+"></td></tr>");

        $.parser.parse(addRow);
        //<td data-id='score'>分数</td><td data-id='sc'><input class='easyui-textbox' type='text' name='score' data-options='required:true'></td>
    });
      optionsNum=1;
  });
    $(function(){

      $("#addOption2").click(function() {

          optionsNum++
//        alert("进来了？？"+optionsNum)
        var addRow=$("#"+tableid).append("<tr><td data-id='optionsDescribe'>属性"+optionsNum+"</td><td data-id='op'><input class='easyui-textbox' type='text' name='optionsDescribe' data-options='required:true'></td><td data-id='couplingIndex'>关联标签</td><td data-id='ci'><input class='easyui-textbox' type='text' name='couplingIndex'></td><td><input type='hidden' name='options' value="+optionsNum+"></td></tr>");

          $.parser.parse(addRow);
          //<td data-id='couplingIndex'>关联标签</td><td data-id='ci'><input class='easyui-textbox' type='text' name='couplingIndex' data-options='required:true'></td>
      });
        optionsNum=1;
    });

      $.fn.serializeObject = function(){//form封装成json
          var questionnaire = {};
          var a = this.serializeArray();
          $.each(a, function() {
              if (questionnaire[this.name]!= undefined) {
                  if (!questionnaire[this.name].push) {
                      questionnaire[this.name] = [questionnaire[this.name]];
                  }
                  questionnaire[this.name].push(this.value || '');
              } else {
                  questionnaire[this.name] = this.value || '';
              }
          });
          return questionnaire;
      };

  });

 function submitForm(){

//      var employmentStatistical = $("#ff").serializeArray(); //自动将form表单封装成json
//      alert(JSON.stringify(employmentStatistical));
//     alert("num:"+num)
      var questionnaire = $('#ff').serializeObject();
//      alert(JSON.stringify(questionnaire));
      var list=[];
      for(var i=1;i<=num;i++){
          var questionnaireResult = $("#ff"+i).serializeObject();
//          alert(JSON.stringify(questionnaireResult));

//          questionnaireResult["couplingIndex"]="";

          list.push(questionnaireResult)
      }
//      alert(list)

     questionnaire['questionnaireResult'] = list;

//     alert(JSON.stringify(questionnaire));
      var xx={questionnaire:JSON.stringify(questionnaire)};//JSON.stringify(json)把json转化成字符串

//     $('#ff').form('submit', {
//         data:xx,
//         url : 'rest/QuestionnaireTemplate/insertQuestionnaireTemplate',
//         onSubmit: function () {
//             return $(this).form('enableValidation').form('validate');
//         },
//         success : function(){
////             var obj = JSON.parse(xx)
//             if(xx.code == 200){
//                 $.messager.show({title:'操作提示',msg:xx.message,showType:'show'});
//             }else{
//                 $.messager.show({title:'操作提示',msg:xx.message,showType:'show'});
//             }
//             $('#ff').form('clear');
//         }
//     });
      $.post("rest/QuestionnaireTemplate/insertQuestionnaireTemplate",xx);

  }
  $("#clearForm").click(function(){
      $('#ff').form('clear');
  })




//  function getTableData(){
//    var data = "{";                                        //定义数据变量
//    $("#table").find("input, select").each(function(){//遍历表格中的input、select等标签
//      if($(this).attr("id")){		               //如果此标签设置了id，则取出其中数据
//        data += "\"" + $(this).attr("id") + "\":\"" + $(this).val() + "\",";	//拼接id和数据
//      }
//    });
//    if(data.length != 1){                                  //如果取出了数据，删除多余的符号
//      data = data.substring(0, data.length-1);       //删除多余的符号','
//    }
//    data += "}";                                           //添加结束符
//    data = eval("(" + data + ")");	                       //将数据转换成json对象
//    return data;					       //返回数据
//  }



</script>
</body>

</html>
